<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 放置搜索组件 -->

      <serach-text @handleSearch="handleSearch"></serach-text>
      <!-- 共计多少条数据 -->
      <el-alert :title="'数据一共' + page.total + '条'" type="info" show-icon />

      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table :data="list">
          <el-table-column label="试题编号" prop="number" />
          <el-table-column label="学科" prop="subject" />
          <el-table-column label="目录" prop="catalog" />

          <el-table-column label="题型" prop="questionType" />
          <el-table-column label="题干" prop="question">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addDate">
            <template slot-scope="{ row }">{{
              row.addDate | formatDate
            }}</template>
          </el-table-column>
          <el-table-column
            label="难度"
            prop="difficulty"
            :formatter="questionsDiff"
          />

          <el-table-column label="录入人" prop="creator" />
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="{ row }">
              <el-button icon="el-icon-view" circle @click="show(row.id)" />

              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="
                  $router.push({
                    name: 'step-form',
                    path: '/questions/new',
                    query: {
                      id: row.id,
                    },
                  })
                "
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteQuestions(row.id)"
              />
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="addQuestions(row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            @current-change="currentChange"
            layout="total,prev, pager, next,jumper"
            :total="page.total"
            page-size="5"
            
          />
        </el-row>
      </el-card>
    </div>

    <!-- 放置预览弹层 -->
    <preview
      ref="preview"
      :show-dialog="showDialog"
      :item-id="itemId"
      @closeDialog="closeDialog"
    />
    
  </div>
</template>

<script>
import serachText from "../components/serachText.vue";
import { formatDate } from "@/filters";
import QueationsEnum from "@/api/constant/questions";


import {
  getQuestionsList,
  deleteQuestions,
  addQuestions
} from '@/api/questions'
import Preview from '../components/preview.vue'

export default {

  name: 'WorkspaceJsonIndex',
  components: { serachText, Preview },

  data() {
    return {
      searchParams: {}, //
      loading: false,
      list: [], // 接数据的
      page: {
        page: 1, // 当前页码

        pagesize: 5
        // total: 0, // 总数
      },
      showDialog: false, // 显示窗体
    };
  },

  mounted() {},
  created() {
    this.getQuestionsList();
   
  },

  methods: {
    async getQuestionsList() {
      const { data } = await getQuestionsList(this.page);
      console.log(data);
      console.log(data.items);
      this.list = data.items;
      this.page.total = data.counts;

      // console.log(this.list);
    },
    async deleteQuestions(id) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?')
        await deleteQuestions(id)
        if (this.list.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.getQuestionsList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 添加到精选题库
    async addQuestions(id) {
      try {
        await this.$confirm('添加到精选题录, 是否继续?', { type: 'warning' })
        await addQuestions(id)
        if (this.list.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.getQuestionsList()
        this.$message.success('添加到精选题录成功！')
      } catch (err) {
        console.log(err);
      }
    },
    // 处理类别中难度列的数据
    questionsDiff(row, column, cellValue, index) {
      //  console.log(QueationsEnum);
      //  console.log(cellValue);
      // 要去找 1所对应的值
      const obj = QueationsEnum.difficulty.find(
        (item) => item.id === cellValue
      );
      console.log(obj);
      return obj ? obj.value : "未知";
    },
    // 显示弹层
    async show(id) {
      this.itemId = id
      console.log('点击了')
      await this.$refs.preview.getQuestionsById(id)
      this.showDialog = true // 显示弹层
    },
    closeDialog() {
      this.showDialog = false
    },
    async handleSearch(v) {
      console.log('v', v)
      const params = { ...v, ...this.page }
      this.searchParams = v
      const { data } = await getQuestionsList(params)
      this.list = data.items
      this.page.total = data.counts
    },
    async currentChange(curPage) {

      console.log("curPage", curPage);
      let params = { ...this.searchParams, ...this.page, page: curPage };
      const { data } = await getQuestionsList(params);
      this.list = data.items;
      this.page.total = data.counts;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
